<template>
  <div>
    <el-card shadow="hover" class="box-card">
      <el-tabs type="border-card" @tab-click="tabClick">
        <el-tab-pane label="人口列表">
          <div>
            <el-form :model="popSearch" label-width="120px">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="姓名">
                    <el-input v-model="popSearch.firstName" size="small"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="身份证号码">
                    <el-input v-model="popSearch.idCard" size="small"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="手机号码">
                    <el-input v-model="popSearch.phone" size="small"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item>
                    <el-button type="primary" size="small" @click="getList(1)">查询</el-button>
                    <el-button type="success" size="small" class="addBut" @click="addPopBut">+ 新增</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div class="form">
              <el-table :data="tableData" border stripe style="width: 100%">
                <el-table-column prop="firstName" width="120" label="姓名" align="center"> </el-table-column>
                <el-table-column prop="sex" width="60" label="性别" align="center"> </el-table-column>
                <el-table-column prop="idCard" width="180" label="身份证号码" align="center"> </el-table-column>
                <el-table-column prop="phone" width="160" label="手机号码" align="center"> </el-table-column>
                <el-table-column prop="currentAddress" label="地址" align="center"> </el-table-column>
                <el-table-column
                  v-if="['1', '8'].includes(roleId)"
                  fixed="right"
                  width="250"
                  label="操作"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-button @click="openPopDetailWin(scope.row)" type="warning" size="small">编辑</el-button>
                    <el-button @click="openDeleteRole(scope.row)" type="danger" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-pagination
              class="pageBox"
              background
              layout="prev, pager, next"
              :current-page="currentPage"
              :total="pageTotal"
              @current-change="getList"
              @prev-click="getList"
              @next-click="getList"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="企业列表">
          <div>
            <el-form :model="enterprise" label-width="80px">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="公司名称">
                    <el-input v-model="enterprise.enterpriseName" size="small"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="企业类型" prop="enterpriseTypeId">
                    <el-select
                      v-model="enterprise.enterpriseTypeId"
                      placeholder="请选择"
                      size="small"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in enterpriseType"
                        :key="item.id"
                        :label="item.principalName"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6"></el-col>
                <el-col :span="6">
                  <el-form-item>
                    <el-button type="primary" size="small" @click="getEnterpriseList(1)">查询</el-button>
                    <el-button type="success" size="small" @click="addEnterpriseBut">+ 新增</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div class="form">
              <el-table :data="enterprise.data" border stripe style="width: 100%">
                <el-table-column prop="enterpriseName" label="公司名称" width="220" align="center"> </el-table-column>
                <el-table-column prop="registeredCapital" label="注册资本 (万元)" align="center"> </el-table-column>
                <el-table-column prop="addressEnterprise" label="企业地址" width="220" align="center">
                </el-table-column>
                <el-table-column prop="businessScope" label="经营范围" width="220" align="center"> </el-table-column>
                <el-table-column prop="establishmentDate" label="成立时间" width="80" align="center"> </el-table-column>
                <el-table-column prop="factoryBuilding" label="厂房性质" width="80" align="center"> </el-table-column>
                <el-table-column prop="floorSpace" label="占地面积（平方米）" width="180" align="center">
                </el-table-column>
                <el-table-column prop="floorage" label="建筑面积（平方米）" width="180" align="center">
                </el-table-column>
                <el-table-column prop="superintendent" label="企业负责人" width="120" align="center"> </el-table-column>
                <el-table-column prop="superintendentPhone" label="负责人电话" width="140" align="center">
                </el-table-column>
                <el-table-column prop="document" label="相关证件" align="center" width="140"> </el-table-column>
                <el-table-column
                  v-if="['1', '8'].includes(roleId)"
                  fixed="right"
                  width="200"
                  label="操作"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-button @click="openEnterpriseDetailWin(scope.row)" type="warning" size="small">编辑</el-button>
                    <el-button @click="deleteEnterprise(scope.row)" type="danger" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-pagination
              class="pageBox"
              background
              layout="prev, pager, next"
              :current-page="enterprise.currentPage"
              :total="enterprise.pageTotal"
              @current-change="getEnterpriseList"
              @prev-click="getEnterpriseList"
              @next-click="getEnterpriseList"
            ></el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 人口新增修改 -->
    <el-dialog
      :title="popForm.id === 0 ? '新增人口数据' : '编辑人口信息'"
      :visible.sync="popForm.dialog"
      width="500px"
      @close="popClose"
      center
      :close-on-click-modal="false"
    >
      <div>
        <el-form label-width="120px">
          <el-form-item label="姓名">
            <el-input v-model="popForm.firstName" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="popForm.sex">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="身份证号码">
            <el-input v-model="popForm.idCard" placeholder="请输入身份证号码"></el-input>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model="popForm.phone" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input
              type="textarea"
              v-model="popForm.currentAddress"
              :maxlength="50"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入地址"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer">
        <el-button @click="popForm.dialog = false">取消</el-button>
        <el-button type="primary" @click="subRole()">保存</el-button>
      </span>
    </el-dialog>
    <!-- 企业新增修改 -->
    <el-dialog
      :title="enterpriseForm.id === 0 ? '新增企业数据' : '编辑企业信息'"
      :visible.sync="enterpriseForm.dialog"
      width="1200px"
      @close="enterpriseClose"
      top="10vh"
      center
      :close-on-click-modal="false"
    >
      <div>
        <el-form label-width="120px" :model="enterpriseForm" :rules="enterpriseRules" ref="enterpriseForm">
          <div class="formItemBox">
            <el-form-item label="公司名称" prop="enterpriseName">
              <el-input v-model="enterpriseForm.enterpriseName" placeholder="请输入公司名称"></el-input>
            </el-form-item>
            <el-form-item label="企业类型" prop="enterpriseTypeId">
              <el-select v-model="enterpriseForm.enterpriseTypeId" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in enterpriseType" :key="item.id" :label="item.principalName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="成立时间">
              <el-input v-model="enterpriseForm.establishmentDate" placeholder="请输入成立时间"></el-input>
            </el-form-item>
          </div>
          <div class="formItemBox">
            <el-form-item label="注册资本">
              <el-input v-model="enterpriseForm.registeredCapital" placeholder="请输入注册资本"></el-input>
            </el-form-item>
            <el-form-item label="项目投资">
              <el-input v-model="enterpriseForm.projectInvestment" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="厂房性质">
              <el-select v-model="enterpriseForm.factoryBuilding" placeholder="请选择" style="width: 100%">
                <el-option label="租用" value="租用"></el-option>
                <el-option label="自建" value="自建"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="formItemBox">
            <el-form-item label="占地面积">
              <el-input v-model="enterpriseForm.floorSpace" placeholder="请输入占地面积"></el-input>
            </el-form-item>
            <el-form-item label="建筑面积">
              <el-input v-model="enterpriseForm.floorage" placeholder="请输入建筑面积"></el-input>
            </el-form-item>
            <el-form-item label="人员规模">
              <el-input v-model="enterpriseForm.staffSize" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="formItemBox">
            <el-form-item label="年产值">
              <el-input v-model="enterpriseForm.annualOutputValue" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="税收">
              <el-input v-model="enterpriseForm.taxation" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="相关证件">
              <el-input v-model="enterpriseForm.document" placeholder="请输入相关证件"></el-input>
            </el-form-item>
          </div>
          <div class="formItemBox">
            <el-form-item label="是否持有国土证">
              <el-select v-model="enterpriseForm.landCertificate" placeholder="请选择" style="width: 100%">
                <el-option label="是" value="是"></el-option>
                <el-option label="否" value="否"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="土地性质">
              <el-select v-model="enterpriseForm.landNature" placeholder="请选择" style="width: 100%">
                <el-option label="隶属村居" value="隶属村居"></el-option>
                <el-option label="私有" value="私有"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input v-model="enterpriseForm.landContactPerson" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="formItemBox">
            <el-form-item label="联系电话">
              <el-input v-model="enterpriseForm.contactPhone" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="主要产品">
              <el-input v-model="enterpriseForm.mainProducts" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="产品销售渠道">
              <el-select
                v-model="enterpriseForm.productSalesChannels"
                placeholder="请选择"
                allow-create
                filterable
                default-first-option
                style="width: 100%"
              >
                <el-option label="国内" value="国内"></el-option>
                <el-option label="国外" value="国外"></el-option>
                <el-option label="国内/国外" value="国内/国外"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="formItemBox">
            <el-form-item label="企业负责人">
              <el-input v-model="enterpriseForm.superintendent" placeholder="请输入企业负责人"></el-input>
            </el-form-item>
            <el-form-item label="负责人电话">
              <el-input v-model="enterpriseForm.superintendentPhone" placeholder="请输入负责人电话"></el-input>
            </el-form-item>
            <el-form-item label="安全管理人员">
              <el-input v-model="enterpriseForm.safetyManagementPersonnel" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="formItemBox">
            <el-form-item label="管理人电话">
              <el-input v-model="enterpriseForm.administratorPhone" placeholder="请输入"></el-input>
            </el-form-item>
          </div>

          <el-form-item label="经营范围">
            <el-input
              type="textarea"
              v-model="enterpriseForm.businessScope"
              :maxlength="300"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入经营范围"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业地址" prop="addressEnterprise">
            <el-input
              type="textarea"
              v-model="enterpriseForm.addressEnterprise"
              :maxlength="50"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入企业地址"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer">
        <el-button @click="enterpriseForm.dialog = false">取消</el-button>
        <el-button type="primary" @click="subEnterprise()">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as api from '@/api/dataVisu'
import { getChildSubject } from '@/api/mainBody'
export default {
  data() {
    return {
      // 人口列表
      tableData: [],
      currentPage: 1,
      pageTotal: 0,
      // 人口编辑新增
      popForm: {
        dialog: false,
        id: 0,
        firstName: '',
        sex: '',
        idCard: '',
        phone: '',
        currentAddress: '',
      },
      popSearch: {
        firstName: '',
        idCard: '',
        phone: '',
      },
      // 企业列表
      enterprise: {
        data: [],
        enterpriseTypeId: '',
        enterpriseName: '',
        currentPage: 1,
        pageTotal: 0,
      },
      // 企业编辑新增
      enterpriseForm: {
        dialog: false,
        id: 0,
        enterpriseName: '',
        registeredCapital: '',
        businessScope: '',
        establishmentDate: '',
        factoryBuilding: '',
        floorSpace: '',
        floorage: '',
        superintendent: '',
        superintendentPhone: '',
        document: '',
        addressEnterprise: '',
        staffSize: '',
        landNature: '',
        mainProducts: '',
        administratorPhone: '',
        enterpriseTypeId: '',
        projectInvestment: '',
        annualOutputValue: '',
        landContactPerson: '',
        productSalesChannels: '',
        taxation: '',
        landCertificate: '',
        contactPhone: '',
        safetyManagementPersonnel: '',
      },
      enterpriseRules: {
        enterpriseName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
        enterpriseTypeId: [{ required: true, message: '请选择企业类型', trigger: 'change' }],
        addressEnterprise: [{ required: true, message: '请输入企业地址', trigger: 'blur' }],
      },
      enterpriseType: [],
      roleId: null,
      keyClock: false,
    }
  },
  created() {
    window.addEventListener('keydown', this.handkeyCode, true)
    this.getList(1)
    this.roleId = localStorage.getItem('roleId')
  },
  methods: {
    handkeyCode(e) {
      let key = null
      if (window.event === undefined) {
        key = e.keyCode
      } else {
        key = window.event.keyCode
      }
      if (key === 13) {
        if (!this.keyClock) {
          this.keyClock = true
          this.subEnterprise()
        }
      }
    },
    // 打开人口新增窗口
    addPopBut() {
      this.popForm.dialog = true
      this.popForm.id = 0
    },
    // 获取人口列表
    getList(e) {
      this.currentPage = e
      let data = {
        pageNo: e,
        pageSize: 10,
        firstName: this.popSearch.firstName,
        idCard: this.popSearch.idCard,
        phone: this.popSearch.phone,
      }
      api.peopList(data).then(res => {
        if (res.code == '200') {
          this.tableData = res.data
          this.pageTotal = res.total
        }
      })
    },
    // 打开编辑人口窗口
    openPopDetailWin(e) {
      this.popForm.dialog = true
      this.popForm.id = e.id
      this.popForm.firstName = e.firstName
      this.popForm.sex = e.sex
      this.popForm.idCard = e.idCard
      this.popForm.phone = e.phone
      this.popForm.currentAddress = e.currentAddress
    },
    // 关闭人口窗口
    popClose() {
      this.popForm = {
        dialog: false,
        id: 0,
        firstName: '',
        sex: '',
        idCard: '',
        phone: '',
        currentAddress: '',
      }
    },
    // 打开删除人口弹窗
    openDeleteRole(e) {
      this.$confirm('确定删除此人员?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        api.peopRemove(e.id).then(res => {
          if (res.code == '200') {
            this.$message({
              message: res.msg,
              type: 'success',
            })
            this.heavyLoad()
          }
        })
      })
    },
    // 新增编辑人口提交
    subRole() {
      // if (!this.popForm.firstName) {
      //   this.$message.error('请输入角色名称')
      //   return
      // }
      let obj = this.popForm
      for (let i in obj) {
        if (!obj[i] && i !== 'id') {
          this.$message.error('请输入全部信息')
          return
        }
      }
      let data = {
        id: this.popForm.id,
        firstName: this.popForm.firstName,
        sex: this.popForm.sex,
        idCard: this.popForm.idCard,
        phone: this.popForm.phone,
        currentAddress: this.popForm.currentAddress,
      }
      api.peopSaveUpdate(data).then(res => {
        if (res.code == '200') {
          this.$message({
            message: res.msg,
            type: 'success',
          })
          this.heavyLoad()
        }
      })
    },
    // 重置
    heavyLoad() {
      this.popClose()
      this.enterpriseClose()
      this.getList(1)
      this.getEnterpriseList(1)
    },
    //切换标签
    tabClick(e) {
      if (e.label == '企业列表') {
        this.getEnterpriseList(1)
      }
    },
    // 获取企业列表
    getEnterpriseList(e) {
      this.enterprise.currentPage = e
      let data = {
        current: e,
        limit: 10,
        enterpriseName: this.enterprise.enterpriseName,
        enterpriseTypeId: this.enterprise.enterpriseTypeId,
      }
      api.enterpriseList(data).then(res => {
        if (res.code == '200') {
          this.enterprise.data = res.data.records
          this.enterprise.pageTotal = res.data.total
        }
      })
      getChildSubject({ parentId: 10 }).then(res => {
        if (res.code == '200') {
          this.enterpriseType = res.data
        }
      })
    },
    // 打开删除企业弹窗
    deleteEnterprise(e) {
      this.$confirm('确定删除此企业?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        api.deleteEnterprise({ id: e.id }).then(res => {
          if (res.code == '200') {
            this.$message({
              message: res.msg,
              type: 'success',
            })
            this.heavyLoad()
          }
        })
      })
    },
    // 打开新增企业窗口
    addEnterpriseBut() {
      this.enterpriseForm.dialog = true
    },
    // 打开编辑人口窗口
    openEnterpriseDetailWin(e) {
      this.enterpriseForm.dialog = true
      this.enterpriseForm.id = e.id
      this.enterpriseForm.enterpriseName = e.enterpriseName || ''
      this.enterpriseForm.registeredCapital = e.registeredCapital || ''
      this.enterpriseForm.businessScope = e.businessScope || ''
      this.enterpriseForm.establishmentDate = e.establishmentDate || ''
      this.enterpriseForm.factoryBuilding = e.factoryBuilding || ''
      this.enterpriseForm.floorSpace = e.floorSpace || ''
      this.enterpriseForm.floorage = e.floorage || ''
      this.enterpriseForm.superintendent = e.superintendent || ''
      this.enterpriseForm.superintendentPhone = e.superintendentPhone || ''
      this.enterpriseForm.document = e.document || ''
      this.enterpriseForm.addressEnterprise = e.addressEnterprise || ''
      this.enterpriseForm.enterpriseName = e.enterpriseName || ''
      this.enterpriseForm.registeredCapital = e.registeredCapital || ''
      this.enterpriseForm.businessScope = e.businessScope || ''
      this.enterpriseForm.establishmentDate = e.establishmentDate || ''
      this.enterpriseForm.factoryBuilding = e.factoryBuilding || ''
      this.enterpriseForm.floorSpace = e.floorSpace || ''
      this.enterpriseForm.floorage = e.floorage || ''
      this.enterpriseForm.superintendent = e.superintendent || ''
      this.enterpriseForm.superintendentPhone = e.superintendentPhone || ''
      this.enterpriseForm.document = e.document || ''
      this.enterpriseForm.addressEnterprise = e.addressEnterprise || ''
      this.enterpriseForm.staffSize = e.staffSize || ''
      this.enterpriseForm.landNature = e.landNature || ''
      this.enterpriseForm.mainProducts = e.mainProducts || ''
      this.enterpriseForm.administratorPhone = e.administratorPhone || ''
      this.enterpriseForm.enterpriseTypeId = e.enterpriseTypeId || ''
      this.enterpriseForm.projectInvestment = e.projectInvestment || ''
      this.enterpriseForm.annualOutputValue = e.annualOutputValue || ''
      this.enterpriseForm.landContactPerson = e.landContactPerson || ''
      this.enterpriseForm.productSalesChannels = e.productSalesChannels || ''
      this.enterpriseForm.taxation = e.taxation || ''
      this.enterpriseForm.landCertificate = e.landCertificate || ''
      this.enterpriseForm.contactPhone = e.contactPhone || ''
      this.enterpriseForm.safetyManagementPersonnel = e.safetyManagementPersonnel || ''
    },
    // 关闭企业窗口
    enterpriseClose() {
      this.$data.enterpriseForm = this.$options.data().enterpriseForm
    },
    // 保存编辑企业
    subEnterprise() {
      this.$refs.enterpriseForm.validate(valid => {
        if (valid) {
          this.keyClock = false
          if (this.enterpriseForm.id == 0) {
            delete this.enterpriseForm.id
          }
          delete this.enterpriseForm.dialog
          if (this.enterpriseForm.id) {
            api
              .updateEnterprise(this.enterpriseForm)
              .then(res => {
                if (res.code == '200') {
                  this.$message({
                    message: res.msg,
                    type: 'success',
                  })
                  this.heavyLoad()
                }
              })
              .catch(() => {
                this.enterpriseClose()
                this.$message({
                  message: '接口报错',
                  type: 'success',
                })
              })
          } else {
            api
              .addEnterprise(this.enterpriseForm)
              .then(res => {
                if (res.code == '200') {
                  this.$message({
                    message: res.msg,
                    type: 'success',
                  })
                  this.heavyLoad()
                }
              })
              .catch(() => {
                this.enterpriseClose()
                this.$message({
                  message: '接口报错',
                  type: 'success',
                })
              })
          }
        }
      })
    },
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.handkeyCode, true)
  },
}
</script>

<style lang="scss" scoped>
.addBut {
  margin-bottom: 10px;
}
.pageBox {
  margin-top: 10px;
  text-align: center;
}
.formItemBox {
  display: flex;
  ::v-deep .el-form-item {
    width: 33.333%;
  }
}
</style>
